<template>
  <div id="Ibox">
    <div class="myTop">
      <div>
        <img src="../../../assets/loding.gif" alt="" />
      </div>

      <div class="icon">
        <i class="iconfont icon-zuanshi"></i>
        <p>会员中心</p>
      </div>
      <div class="icon">
        <i class="iconfont icon-shezhi"></i>
        <p>安全设置</p>
      </div>
      <div class="icon">
        <i class="iconfont icon-weizhi"></i>
        <p>地址管理</p>
      </div>
    </div>
    <my-item :arr="browseArr">
      <template #title>
        <h5>我的收藏</h5>
      </template>
    </my-item>
    <my-item :arr="browseArr">
      <template #title>
        <h5>我的足迹</h5>
      </template>
    </my-item>
    <div class="swiper">
      <h5>猜你喜欢</h5>

      <el-carousel trigger="click" height="260px" :autoplay="false">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="items" v-for="items in relevantArr.slice((item-1)*4,item*4)" :key="items.id">
            <img :src="items.picture" alt="" />
            <p>{{ items.name }}</p>
            <p>{{ items.desc }}</p>
            <p>￥{{ items.price }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import MyItem from "./MyItem.vue";
import { mybrowse,myrelevant } from "@/api/user";

export default {
  components: { MyItem },
  name: "IView",
  data() {
    return {
      browseArr: [],
      relevantArr:[]
    };
  },
  created() {
    mybrowse().then((res) => {
      this.browseArr = res.data.result.items;
    });
    myrelevant().then(res=>{
      this.relevantArr = res.data.result;
    })
  },
};
</script>

<style lang="scss" scoped>
#Ibox {
  width: 80%;
  .myTop {
    width: 100%;
    height: 130px;
    line-height: 130px;
    display: flex;
    justify-content: space-evenly;
    background: url("http://erabbit.itheima.net/img/center-bg.31e0daef.png");
    :nth-child(1) {
      width: 50%;
      text-align: left;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .icon {
      line-height: 30px;
      padding-top: 30px;
      color: #fff;
      i {
        font-size: 30px;
      }
      p {
        font-size: 16px;
      }
    }
  }
  .swiper {
    background: #fff;
    margin-top: 20px;
    .items {
      width: 205px;
      margin: 12px;
      text-align: center;
      padding: 10px;

      img {
        width: 160px;
        height: 160px;
      }
      p {
        margin: 5px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      :nth-child(3) {
        color: #666;
        font-size: 14px;
      }
      :nth-child(4) {
        color: red;
        font-size: 18px;
      }
    }
  }
  h5 {
    width: 95%;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    font-size: 20px;
    text-align: left;
    font-weight: 300;
  }
  .el-carousel__item {
    display: flex;
    justify-content: space-around;
    background: rgb(255, 255, 255);
  }
  .el-carousel {
    height: 300px;

    .el-carousel__container {
      height: 300px;
    }
  }
  .el-carousel__button {
    background-color: rgb(0, 0, 0);
  }
  .el-carousel__container {
    height: 260px;
  }
}
</style>